@import "variables";
@import "mixins";

button,
.btn,
.cbi-button,
a.cbi-button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  @include tooltip-shadow;

  user-select: none;
  align-items: center;
  border: none;
  border-radius: 3px;
  color: #ffffff;
  fill: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-family: $base-font-family;
  font-size: $button-font-size;
  font-weight: normal;
  height: $input-height;
  justify-content: center;
  line-height: $input-height;
  outline: none;
  padding: 0 10px;
  transition: $transition-time;
  white-space: nowrap;

  > img {
    margin-right: 6px;
  }
}

.btn {
  &.success {
    @include button($color-green-base, $color-green-lighten-5, $color-green-darken-5);
  }

  &.info {
    @include button($color-blue-base, $color-blue-lighten-5, $color-blue-darken-5);
  }

  &.danger {
    @include button($color-orange-base, $color-orange-lighten-10, $color-orange-darken-10);
  }
}

a.btn {
  color: #ffffff;
}

button,
.btn,
.cbi-button {
  @include button($color-blue-darken-10, $color-blue-base, $color-blue-darken-10);
}

.btn.reset,
.btn.error,
.btn.important,
.cbi-button-reset,
.cbi-button-remove,
.cbi-button-negative,
.cbi-section-remove input[type="submit"] {
  @include button($color-red-base, $color-red-lighten-5, $color-red-darken-5);
}

button,
.btn,
.cbi-button {
  &:disabled,
  &[disabled] {
    @include button($color-gray-lighten-70, $color-gray-lighten-70, $color-gray-lighten-70);
    color: #888;
    fill: #888;
    cursor: not-allowed;
  }
}

input.cbi-input-text[disabled] + button[aria-label].cbi-button, /* CIDR switch buttons */
input.cbi-input-password[disabled] + button[aria-label].cbi-button, /* Password show/hide buttons */
.cbi-dynlist[disabled] .cbi-button {
  @include button($color-gray-lighten-70, $color-gray-lighten-70, $color-gray-lighten-70);
  color: #888;
  fill: #888;
  cursor: not-allowed;
}
